<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="运营数据" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="operational-data">
			<view class="operational-data-list">
				<view class="operational-data-list-title">总计</view>
				<view class="operational-data-list-ul">
					<view class="operational-data-list-ul-lis">
						<view class="operational-data-list-ul-li">
							<image src="../../static/operationaldata/shop3.png" class="operational-data-list-ul-li-image"></image>
							<text class="operational-data-list-ul-li-text">商家总数：{{ stores.total }}</text>
						</view>
						<view class="operational-data-list-ul-li">
							<image src="../../static/operationaldata/order3.png" class="operational-data-list-ul-li-image"></image>
							<text class="operational-data-list-ul-li-text">累计订单总数：{{ orders.total }}</text>
						</view>
					</view>
					<view class="operational-data-list-ul-lis">
						<view class="operational-data-list-ul-li">
							<image src="../../static/operationaldata/price3.png" class="operational-data-list-ul-li-image"></image>
							<text class="operational-data-list-ul-li-text">累计收益：{{ revenue.total }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="operational-data-list">
				<view class="operational-data-list-title">昨日</view>
				<view class="operational-data-list-ul">
					<view class="operational-data-list-ul-lis">
						<view class="operational-data-list-ul-li">
							<image src="../../static/operationaldata/shop1.png" class="operational-data-list-ul-li-image"></image>
							<text class="operational-data-list-ul-li-text">商家新增数：{{ stores.yesterday }}</text>
						</view>
						<view class="operational-data-list-ul-li">
							<image src="../../static/operationaldata/order1.png" class="operational-data-list-ul-li-image"></image>
							<text class="operational-data-list-ul-li-text">昨日订单总数：{{ orders.yesterday }}</text>
						</view>
					</view>
					<view class="operational-data-list-ul-lis">
						<view class="operational-data-list-ul-li">
							<image src="../../static/operationaldata/price1.png" class="operational-data-list-ul-li-image"></image>
							<text class="operational-data-list-ul-li-text">昨日收益：{{ revenue.yesterday }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="operational-data-list">
				<view class="operational-data-list-title">最近7日</view>
				<view class="operational-data-list-ul">
					<view class="operational-data-list-ul-lis">
						<view class="operational-data-list-ul-li">
							<image src="../../static/operationaldata/shop2.png" class="operational-data-list-ul-li-image"></image>
							<text class="operational-data-list-ul-li-text">商家新增数：{{ stores.week }}</text>
						</view>
						<view class="operational-data-list-ul-li">
							<image src="../../static/operationaldata/order2.png" class="operational-data-list-ul-li-image"></image>
							<text class="operational-data-list-ul-li-text">7日订单总数：{{ orders.week }}</text>
						</view>
					</view>
					<view class="operational-data-list-ul-lis">
						<view class="operational-data-list-ul-li">
							<image src="../../static/operationaldata/price2.png" class="operational-data-list-ul-li-image"></image>
							<text class="operational-data-list-ul-li-text">7日累计收益：{{ revenue.week }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				orders: {},
				revenue: {},
				stores: {}
			};
		},
		components: {
			uniNavBar
		},
		onLoad() {
			const token = uni.getStorageSync('d_token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('d_role')
					uni.removeStorageSync('d_memberId')
					uni.removeStorageSync('d_token')
					uni.removeStorageSync('d_openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this._getOrderData()
			this._getRevenue()
			this._getStores()
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			_getOrderData() {
				uni.request({
					url: `${config.api_base_url}agent/index/orders`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.orders = data.orders
						} else {
							this.orders = {}
						}
					}),
					fail: (() => {
						this.orders = {}
						uni.showToast({
							icon: 'none',
							title: '请求失败, 网络异常'
						})
					})
				});
			},
			_getStores() {
				uni.request({
					url: `${config.api_base_url}agent/index/stores`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.stores = data.stores
						} else {
							this.stores = {}
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求失败, 网络异常'
						})
					})
				});
			},
			_getRevenue() {
				uni.request({
					url: `${config.api_base_url}agent/index/revenue`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('d_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.revenue = data.revenue
						} else {
							this.revenue = {}
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求失败, 网络异常'
						})
					})
				});
			}
		}
	};
</script>

<style>
	page {
		background: #f5f5f5;
		padding: 15rpx;
		box-sizing: #f5f5f5;
	}
</style>
<style scoped>
	.operational-data {}

	.operational-data-list {
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
		padding: 0rpx 32rpx;
		box-sizing: border-box;
		margin-bottom: 12rpx;
	}

	.operational-data-list-title {
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		height: 72rpx;
		border-bottom: 2rpx solid #eeeeee;
		line-height: 72rpx;
	}

	.operational-data-list-ul {
		overflow: hidden;
		padding: 30rpx 0rpx 15rpx;
		box-sizing: border-box;
	}

	.operational-data-list-ul-lis {
		display: flex;
	}

	.operational-data-list-ul-li {
		width: 100%;
		float: left;
		margin-bottom: 18rpx;
	}

	.operational-data-list-ul-li:nth-child(1) {
		width: 80%;
		margin-right: 40rpx;
	}

	.operational-data-list-ul-li-image {
		width: 36rpx;
		height: 40rpx;
		display: block;
		float: left;
		margin-right: 20rpx;
	}

	.operational-data-list-ul-li-text {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		float: left;
		color: rgba(51, 51, 51, 1);
	}
</style>
